<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance API Example</title>
</head>
<style>
    #myList{
        margin: 20px;
        padding: 0;
        list-style-type: none;
    }
</style>
<body>
   <ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>

   <script> 
    document.addEventListener('DOMContentLoaded',function(){
        //performance api 
        performance.mark('start')
        //获取第一个元素
        const firstLi=document.querySelector('#myList li')
        if(firstLi){
            performance.mark('firstLiRendered')
        }
        performance.mark('end')
        performance.measure('第一个时间', 'start', 'firstLiRendered')
        const measure=performance.getEntriesByName('第一个时间')
        if(measure.length>0){
            console.log('第一个元素渲染时间',measure[0].duration,'毫秒')
        }
        performance.clearMarks()
        performance.clearMeasures()
    })
   </script>
</body>
</html>